<template>
	<view :class="currentTheme">
		<a-nabbar :name="!isEnd?'游戏中':'游戏结束'"/>
		<view class="content">
			<!-- 标题 -->
			<view class="title">
				<view class="content-desc-item u-font-30 u-text-center">
					{{isEnd?'本次游戏用时':'&nbsp;'}}
				</view>
			</view>
			<!-- 倒计时 -->
			<view class="time box-title u-text-center">{{timerArr}}</view>

			<!-- 图片 -->
			<view class="u-flex u-row-center u-margin-top-80">
				<item-image :img="`${aliosCdn}/larp/common-${currentTheme}/car.png`" width="300" height="324"></item-image>
			</view>

			<view class="u-margin-top-54" v-if="!isEnd">
				<view class="u-font-30 content-desc-item u-text-center">
						组局进行中...
				</view>
			</view>

			<view class="u-margin-top-20 u-margin-bottom-20">
				<view class="u-flex u-row-center" v-if="isEnd">
					<view class="select-btn" @click="showSelect('radio')">who is MVP?</view>
					<view class="select-btn" @click="showSelect('checkbox')">who are winner?</view>
				</view>
				<view class="u-flex u-row-center u-col-top">
					<view class="select-btn" v-if="form.mvpUid">
						MVP:{{mvpObj.nickname}}
					</view>
					<view class="select-btn" v-if="winnerStr">
						winner:{{winnerStr}}
					</view>
				</view>
			</view>
			

			<!-- 提示 -->
			<view class="tips-box-end" v-if="isEnd">
				<view class="u-flex u-row-center">
					<u-icon name="laba" custom-prefix="custom-icon" size="36" :color="currentThemeObj.primary"></u-icon>
					<text class="u-font-28 u-margin-left-16">注意咯！</text>
				</view>
				<view class="text-color-txtTheme u-font-26 u-text-center tips">
					提醒玩家编辑评价，有助于提升门店曝光
				</view>
			</view>
			<view class="tips-box" v-else>
				<view class="text-color-txtTheme u-font-26 u-text-center tips">
					点击结束游戏记录组局数据
				</view>
			</view>
	
		
			<!-- 按钮 -->
			<view class="btns">	
				<u-button @click="endItem" shape="circle" hover-class="none" 
				:custom-style="{backgroundColor:'#765CFE',color:'#765CFE',width:'300rpx','marginTop':'10rpx'}">
				<text class="text-white" >{{isEnd?'完成':'结束游戏'}}</text></u-button>
			</view>
		</view>
		<!-- 选择玩家弹框  -->
		<u-popup v-model="show" mode="center" border-radius="14" closeable>
			<view class="u-text-center u-font-30 u-padding-32 bg-theme-model">{{selectType==='checkbox' ? '请选择本场winner(可多选)' : '请选择本场MVP'}}</view>
			<view class="u-padding-40 bg-theme-model">
				<scroll-view scroll-y="true" style="height: 30vh;width: 70vw;">
					<template v-if="selectType==='radio'">
						<!-- <u-radio-group v-model="mvpUid">
							<u-radio 
								v-for="(item, index) in selectPerson" :key="index" 
								:name="item.uid" active-color="#765CFE">
								<text>{{item.nickname}}</text>
							</u-radio>
						</u-radio-group> -->
						<view class="group-box u-flex">
							<v-radio :name="item.uid" v-for="(item, index) in selectPerson" :key="index"  v-model="mvpUid" marginLfet="20" otherClass="flex-line-2">
								<view class="text-white-black-reversal u-font-32">{{item.nickname}}</view>
							</v-radio>
							<!-- <v-radio :name="item.uid" v-for="(item, index) in selectPerson" :key="index"  v-model="mvpUid" marginLfet="0">
								<view class="text-white-black-reversal u-font-32">{{item.nickname}}</view>
							</v-radio> -->
						</view>
					</template>
					<template  v-if="selectType==='checkbox'">
						<u-checkbox-group>
							<u-checkbox 
								v-model="item.checked" 
								v-for="(item, index) in selectPerson" :key="index" 
								:name="item.uid"  :active-color="currentThemeObj.primary">
								<text>{{item.nickname}}</text>
							</u-checkbox>
						</u-checkbox-group>
					</template>
				</scroll-view>
				<view class="u-flex u-row-center">
					<view>
						<item-btn  @click="select" width="300" height="70">
							<text class="u-font-24">确定</text>
						</item-btn>
					</view>
					
				</view>
				
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {add,getDetail} from '@/api/crud.js'
	import vRadio from '@/components/itemRadio/itemRadio.vue'
	export default {
		components:{
			vRadio
		},
		data() {
			return {
				apiType:"gatherGame",
				apiModule:'shopApi',
				time:0,
				timer:null,
				timerArr:'00:00:00',
				isStopTime:0,
				id:0,
				driveCarName:'',
				isReload:false,
				selectType:'',
				selectPerson:[],
				winnerArr:[],
				form:{
					mvpUid:"",
					winUids:[]
				},
				show:false,
				mvpUid:''
			};
		},
		computed: {
			//获取当前选择的mvp
			mvpObj() {
				return this.selectPerson.find(val=>val.uid===this.mvpUid) || {} 
			},
			//获取当前选择的赢家
			winnerStr(){
				return this.winnerArr.filter(val=>val.checked).map(val=>val.nickname).join(",")
			},
			isEnd(){
				return this.isStopTime==1
			}
		},
		onLoad({id}) {
			this.id = id;
			uni.$on('completeCar',res=>this.getPageTime)
			getDetail({gatherGamedId:this.id},this.apiType,this.apiModule,'findGatherGameUserSmallDto').then(res=>{
				this.selectPerson = res.map(val=>{
					val.checked = false;
					return val;
				})
			})
		},
		onUnload() {
			uni.$off('completeCar')
			this.clearTime()
			uni.removeStorageSync('setHrefFlag')
		},
		onShow() {
			this.getPageTime()
		},
		methods: {
			clearTime(){
				if(this.timer){
					clearTimeout(this.timer)
					this.timer = null;
				}
			},
			getPageTime(){
				this.clearTime()
				add('',this.apiType,this.apiModule,`getRunTime/${this.id}`).then(res=>{
					this.time = res.runTime / 1000;
					this.form = res;
					this.isStopTime = res.isStopTime
					this.driveCarName = res.gatherGameName || '开车名称'
					res.isStopTime===0&&this.timeout();
					res.isStopTime===1&&this.formatTime(this.time)
				})
			},
			formatTime(seconds) {
				// 小于等于0的话，结束倒计时
				let [day, hour, minute, second] = [0, 0, 0, 0];
				const hourNumber = 60 * 60 ;
				day = Math.floor(seconds / (hourNumber * 24));
				// 判断是否显示“天”参数，如果不显示，将天部分的值，加入到小时中
				// hour为给后面计算秒和分等用的(基于显示天的前提下计算)
				hour = Math.floor(seconds / hourNumber) - day * 24;
				// showHour为需要显示的小时
				let showHour = Math.floor(seconds / hourNumber);
				minute = Math.floor(seconds / 60) - hour * 60 - day * 24 * 60;
				second = Math.floor(seconds) - day * 24 * hourNumber - hour * hourNumber - minute * 60;
				// 如果小于10，在前面补上一个"0"
				showHour = this.addZero(showHour);
				minute = this.addZero(minute);
				second = this.addZero(second);
				this.timerArr = [showHour,minute,second].join(':')
			},
			addZero(time){
				return time < 10 ? '0' + time : time;
			},
			timeout() {
				this.formatTime(this.time)
				this.timer = setTimeout(()=>{
					this.time+=1;
					this.timeout()
				},1000)
			},
			//完成测本
			endItem(){
				this.isEnd ? this.completeGame() : this.updateCompleteTime()
			},
			updateCompleteTime(){
				add(this.form,this.apiType,this.apiModule,`updateCompleteTime/${this.id}`).then(res=>{
					this.$u.toast('操作成功')
					this.getPageTime()
				})
			},
			completeGame(){
				if(!this.form.mvpUid){
					this.$u.toast('请选择MVP')
					return false;
				}
				if(this.form.winUids.length===0){
					this.$u.toast('请选择winner玩家')
					return false;
				}
				add(this.form,this.apiType,this.apiModule,`completeGame/${this.id}`).then(res=>{
					this.$u.toast('操作成功')
					setTimeout(()=>{
						this.closePage()
					},1500)
				})
			},
			closePage(){
				this.$u.route({
					type: "switchTab",
					url: '/pages/index/index'
				})
				//this.$u.route({type:'back'})
			},
			//刷新
			refresh(){
				if(!this.isReload) this.getPageTime()
				this.isReload = true
			},
			//重新完成发车跳转页面的方法
			goLoading(){
				console.log(3666666666666)
				this.getPageTime()
			},
			//点击选择mvp和winner
			showSelect(type){
				this.selectType = type;
				this.show = true;
			},
			//选中
			select(){
				this.form.mvpUid = this.mvpUid;
				this.winnerArr = this.selectPerson.filter(val=>val.checked)
				this.form.winUids = this.winnerArr.map(val=>val.uid)
				this.show = false;
			}
		},
	}
</script>
<style>
	/deep/.u-mode-center-box{
		background-color:#302D41 ;
	}
</style>
<style lang="scss" scoped>
.time{
	font-size: 110rpx;
	margin-top: 40rpx;
	letter-spacing: 20rpx;
}
.game-status{
	margin-top: 54rpx;
}
.tips-box{
	margin-top: 154rpx;
}
.tips-box-end{
	
}
.tips{
	line-height: 52rpx;
}
.btns{
	padding: 0 80rpx 80rpx;
}
@keyframes time{
	from {transform: rotate(0deg);}
	to {transform: rotate(720deg);}
}

.reload{
}
.reload-time{
	animation:time 2s;
	animation-iteration-count:2;
	animation-fill-mode:forwards;
}
.content{
	// background: url('https://larp-gbo.oss-cn-chengdu.aliyuncs.com/wx/carBg.png');
	// width: 100vw;
	// height: 100vh;
	// background-size: 100% 100%;
}
.select-btn{
	min-height: 96rpx;
	display: flex;
	justify-content: center;
	align-items: center;
	border: 1rpx solid #bfbfbf;
	font-size: 28rpx;
	color: var(--title-color);
	font-weight: bold;
	width: 250rpx;
	margin:20rpx 40rpx;
	text-align: center;
	border-radius: 20rpx;
}
.title{
	margin-top: 116rpx;
}
.group-box{
	flex-wrap: wrap;
	.flex-line-2{
		flex:0 0 50%;
		margin: 20rpx 0;
	}
}

</style>
